<template>
  <!-- 头部区域 -->
  <div class="QAhead">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部区域1 - 提示信息+新增按钮 -->
        <div class="QAhead-top">
          <span class="QAhead-top-left"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button size="small" icon="el-icon-edit" type="success"
            >新增用户</el-button
          >
        </div>
        <!-- 头部区域2 - el-form - 搜索栏 -->
        <el-form :model="form" ref="form">
          <div class="filter-container">
            <el-row :gutter="20">
              <!-- 第一行第一列:选择学科-select -->
              <el-col :span="6">
                <el-form-item label="学科">
                  <el-select
                    :span="3"
                    v-model="subjectValue"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in subjectList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 第一行第二列:二级目录-select -->
              <el-col :span="6">
                <el-form-item label="二级目录">
                  <el-select v-model="secondValue" placeholder="请选择">
                    <el-option
                      v-for="item in secondList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 第一行第三列:标签-select -->
              <el-col :span="6">
                <el-form-item label="标签">
                  <el-select v-model="labelValue" placeholder="请选择">
                    <el-option
                      v-for="item in labelList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 第一行第四列:关键字 -->
              <el-col :span="6">
                <el-form-item label="关键字">
                  <el-input
                    v-model.trim="keywordValue"
                    placeholder="根据题干搜索"
                  ></el-input>
                </el-form-item>
              </el-col>
              <!-- 第二行第一列:试题类型 -->
              <el-col :span="6">
                <el-form-item label="试题类型">
                  <el-select v-model="typeValue" placeholder="请选择">
                    <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 第二行第二列:难度 -->
              <el-col :span="6">
                <el-form-item label="难度">
                  <el-select v-model="levelValue" placeholder="请选择">
                    <el-option label="简单" value="简单"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="困难" value="困难"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 第二行第三列:方向 -->
              <el-col :span="6">
                <el-form-item label="方向">
                  <el-select v-model="directionValue" placeholder="请选择">
                    <el-option
                      v-for="item in directionList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 第二行第四列:录入人 -->
              <el-col :span="6">
                <el-form-item label="录入人">
                  <el-select v-model="levelValue" placeholder="请选择">
                    <el-option
                      label="超级管理员"
                      value="超级管理员"
                    ></el-option>
                    <el-option
                      label="录入管理员"
                      value="录入管理员"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 第三行第一列:题目备注 -->
              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input v-model.trim="noteValue"></el-input>
                </el-form-item>
              </el-col>
              <!-- 第三行第二列:企业简称 -->
              <el-col :span="6">
                <el-form-item label="企业简称">
                  <el-input v-model.trim="enterpriseValue"></el-input>
                </el-form-item>
              </el-col>
              <!-- 第一行第四列:城市 -->
              <el-col :span="6">
                <el-form-item label="城市11">
                  <MyCity v-model="form.provAndCity" class="myCity"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>

        <!-- 主体区域 - tabs标签页 -->
        <el-tabs type="card" >
          <el-tab-pane label="全部" name="first">
            <!-- 数据记录 -->
            <el-alert
              v-if="cResultTip"
              :title="cResultTip"
              type="info"
              class="alert"
              :closable="false"
              show-icon
            ></el-alert>

            全部
            <my-table></my-table>
          </el-tab-pane>

          <el-tab-pane label="待审核" name="second">
            <!-- 数据记录 -->
            <el-alert
              v-if="cResultTip"
              :title="cResultTip"
              type="info"
              class="alert"
              :closable="false"
              show-icon
            ></el-alert>

            待审核
            <my-table></my-table>
          </el-tab-pane>

          <el-tab-pane label="已审核" name="third">
            <!-- 数据记录 -->
            <el-alert
              v-if="cResultTip"
              :title="cResultTip"
              type="info"
              class="alert"
              :closable="false"
              show-icon
            ></el-alert>

            已审核
            <my-table></my-table>
          </el-tab-pane>

          <el-tab-pane label="已拒绝" name="fourth">
            <!-- 数据记录 -->
            <el-alert
              v-if="cResultTip"
              :title="cResultTip"
              type="info"
              class="alert"
              :closable="false"
              show-icon
            ></el-alert>

            已拒绝
            <my-table></my-table>
          </el-tab-pane>
        </el-tabs>

      </el-card>

    </div>
  </div>
</template>

<script>
import myTable from "@/module-hmmm/pages/questionsComponnets/myTable.vue";
import { status } from "@/api/hmmm/constants";
import { list as getCompanys, remove, disabled } from "@/api/hmmm/companys";
import MyCity from "@/module-hmmm/pages/companys/citys.vue";
export default {
  name: "CompanysList",
  components: {
    MyCity,
    myTable
  },
  data() {
    return {
      subjectValue: "",
      subjectList: [],
      secondValue: "",
      secondList: [],
      labelValue: "",
      labelList: [],
      directionValue: "",
      directionList: [],
      typeValue: "",
      typeList: [],
      keywordValue: "",
      enterpriseValue: "",
      noteValue: "",
      levelValue: "",

      total: 0, //记录的总条数

      companys: [],

      curCompanyId: null, // 区别于是否是编辑，还是添加

      isLoading: false,
      isShowDialog: false,

      // 查询表单中的参数
      form: {
        shortName: "",
        state: null,
        tags: "",
        provAndCity: {
          province: "",
          city: "",
        },
        page: 1,
        pagesize: 10,
      },
    };
  },
  // 创建完毕,做一次查询
  created() {
    this.loadCompanys();
  },
  computed: {
    //   动态获取记录的总条数
    cResultTip() {
      return `共 ${this.total} 条记录`;
    },

    status() {
      return status;
    },

    cTitle() {
      return this.curCompanyId ? "编辑公司" : "添加新公司";
    },
  },
  methods: {
    buildParams() {
      const paramsObj = {};
      const { page, pagesize, provAndCity, tags, state } = this.form;
      // 如果某一个参数是null,则axios就不会发这个参数
      // 如果某一个参数是""，axios是会发出这个参数
      paramsObj.page = page || null;
      paramsObj.pagesize = pagesize || null;
      paramsObj.tags = tags || null;
      paramsObj.province = provAndCity.city || null;
      paramsObj.city = provAndCity.city || null;
      paramsObj.state = state === "" ? null : state;
      return paramsObj;
    },
    // 获取列表数据
    async loadCompanys() {
      this.isLoading = true;
      // 构建查询参数
      const paramsObj = this.buildParams();

      try {
        const { data: res } = await getCompanys(paramsObj);
        // 获取数据给companys
        this.companys = res.items;
        // 获取总条数
        this.total = res.counts;

        this.isLoading = false;
      } catch (err) {
        console.log(err);
        this.isLoading = true;
      }
    },
    // 重置整个表单
    hResetForm() {
      // el 表单组件上有一个resetFields方法
      this.$refs.form.resetFields();

      // 由于provAndCity传给了自定义组件，它们并不是在当前表单中直接
      // 使用的，所以，这里要去做手动清空
      this.form.provAndCity.province = "";
      this.form.provAndCity.city = "";
    },
    // 搜索信息
    hQuery() {
      // 重置页码
      this.form.page = 1;
      // 重发请求
      this.loadCompanys();
    },
    // 更改每页显示的条数
    hSizeChange(val) {
      this.form.pagesize = val;

      if (this.form.page === 1) {
        this.loadCompanys();
      }
    },
    // 点击某一个页码
    hCurrentChange(curPage) {
      this.form.page = curPage;
      this.loadCompanys();
    },

    hEdit(id) {
      this.curCompanyId = id;
      this.isShowDialog = true;
    },
    async doDelete(id) {
      try {
        await remove({ id });
        this.$message.success("成功删除了用户!");
        this.loadCompanys();
      } catch (err) {
        this.$message.error("删除失败!");
      }
    },
    // 删除
    hDelete(userId) {
      this.$confirm("此操作将永久删除用户 " + ", 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.doDelete(userId);
        })
        .catch(() => {
          this.$message.info("已取消操作!");
        });
    },
    async doSwitch(row) {
      var data = {
        id: row.id,
        state: Number(!row.state),
      };
      console.log(data);
      await disabled(data)
        .then((response) => {
          this.$message.success("操作成功!");
          this.loadCompanys(this.form);
        })
        .catch((response) => {
          this.$message.error(status + "失败!");
        });
    },
    // 启用、禁用
    hSwitchStatus(row) {
      const tip = "已成功" + (row.state ? "禁用" : "启用") + ", 是否继续?";
      this.$confirm(tip, "提示", {
        type: "warning",
      })
        .then(() => {
          this.doSwitch(row);
        })
        .catch(() => {
          this.$message.info("已取消操作!");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .QAhead-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .QAhead-top-left {
      color: #ffc0cb;
      font-size: 12px;
    }
  }
  .el-col-6 {
    .el-form-item {
      display: flex;
      justify-content: flex-end;
      .el-form-item__label {
        display: inline-block;
        width: 68px ;
      }
      .el-form-item__content {
        display: inline-block;
        flex: 1;
      }
      .el-select,
      .el-input,.myCity {
        width: 100%;
      }
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
